<template>
  <div class="user-info">
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-icon size="25"><Avatar /></el-icon>
        <span class="text">{{ userName }}</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(item, index) in userDropdownList" :key="index">
            <el-dropdown-item @click="handleExitClick(item)">{{ item.title }}</el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'

import { localCache } from '@/utils'

const router = useRouter()
const store = useStore()

const userName = computed(() => store.state.name)

const userDropdownList = [
  {
    title: '查看用户信息'
  },
  {
    title: '退出登录'
  }
]
function handleExitClick(item: any) {
  const { title } = item
  if (title == '退出登录') {
    localCache.deleteCache('token')
    router.push('/main')
  }
}
</script>

<style lang="less" scoped>
.user-info {
  .el-dropdown-link {
    display: flex;
    align-items: center;
    .text {
      padding: 3px;
    }
  }
}
</style>
